<template>
  <div>
    <div class="headerbox">
      <div class="header">
        <div class="headerL">
          <a onclick="javascript:history.back(-1)" class="goback"
            ><img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/goback.png"
          /></a>
        </div>
        <div class="headerC0">
          <div class="ssdiv">
            <input
              name=""
              @keyup="onkeyup"
              v-model="pname"
              type="text"
              ref="inputs"
              v-focus="true"
              @keyup.enter="searchTo"
              placeholder="华为mate20"
            />
            <a href="#" @click="searchTo"
              ><img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/ss.png"
            /></a>
          </div>
        </div>
        <div class="headerR">
          <a onclick="javascript:history.back(-1)">取消</a>
        </div>
      </div>
    </div>
    <div class="hbox"></div>
    <div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </div>
    <div v-if="goodsList.length == 0">
      <van-empty
        image="	https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/搜索失败.png"
        description="暂无该类商品！"
      />
    </div>
    <div v-else class="item_goodslist">
      <div v-for="(item, index) in goodsList" :key="index">
        <router-link :to="{ name: 'details', params: { gid: item.GoodsID } }">
          <van-card
            :price="item.GoodsPrice + '.00'"
            :title="item.GoodsName"
            :thumb="imgUrl + item.GoodsPic"
          >
            <template #desc>
              <div class="desc">
                <div>
                  <p class="color">{{ item.color }}</p>
                  <p class="color-title">产品颜色</p>
                </div>
                <div style="color: #ababab">|</div>
                <div>
                  <p class="color">{{ item.DetailsName }}</p>
                  <p class="color-title">品牌分类</p>
                </div>
                <div style="color: #ababab">|</div>
                <div>
                  <p class="color">{{ item.typeName }}</p>
                  <p class="color-title">产品类别</p>
                </div>
              </div>
            </template>
            <template #footer>
              <div class="ebli">1000+条评论 97%好评</div>
            </template>
          </van-card>
        </router-link>
      </div>
    </div>

    <transition name="van-slide-up">
      <div class="PrepBox" v-if="PrepBoxShow">
        <ul>
          <li
            v-for="item in wordsList"
            :key="item.sid"
            class="van-hairline--bottom"
          >
            <a href="#" @click.prevent="toResults(item.Words)">{{
              item.Words
            }}</a>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pname: "",
      wordsList: [],
      PrepBoxShow: false,
      value1: 0,
      value2: "a",
      value3: "a",
      value4: "a",

      option1: [
        { text: "综合推荐", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      option3: [
        { text: "价格", value: "a" },
        { text: "1500-2500", value: "b" },
        { text: "3500-5500", value: "c" },
        { text: "6500-7500", value: "e" },
        { text: "8500-10000", value: "f" },
      ],
      option4: [{ text: "销量", value: "a" }],
      goodsList: [],
      page_num: 1,
      page_size: 10,
      loading: false,
      finished: false,
    };
  },
  directives: {
    focus: {
      inserted: function (el, { value }) {
        if (value) {
          el.focus();
        }
      },
    },
  },
  created() {
    if (this.$route.params) {
      this.id = this.$route.params.pname;
      this.getQueryGoods();
    }
  },
  methods: {
    toResults(val) {
      this.PrepBoxShow = false;
      this.$router.push({
        name: "GoodsResults",
        params: { pname: val },
      });
    },
    getview() {
      // this.pname = this.$route.params.pname;
      // this.getQueryGoods();
    },
    async getQueryGoods() {
      this.pname = this.$route.params.pname;
      const { data: res } = await this.$http.get("queryGoods", {
        params: {
          GoodsName: this.pname,
        },
      });
      this.goodsList = res.data;

      // if (res.status == 200) {
      //   this.loading = false;
      //   if (res.data.length) {
      //     this.goodsList.push(...res.data);
      //   } else {
      //     this.finished = true;
      //   }
      // }
    },
    onLoad() {
      // this.page_num += 1;
      // setTimeout(() => {
      //   this.getQueryGoods();
      // }, 500);
    },
    async searchTo() {
      if (this.pname === "") {
        this.$toast("请输入！");
      } else {
        this.$router.push({
          name: "GoodsResults",
          params: { pname: this.pname },
        });

        this.PrepBoxShow = false;
        const { data: res } = await this.$http.get("ValidationWords", {
          params: { words: this.pname },
        });
        let words = {
          wods: this.pname,
        };
        this.Recent.push(words);
        this.$store.commit("setgoodsRecentSearch", this.Recent);

        if (res.status === 200) {
          this.addWords();
        }
        if (res.status === 202) {
          this.addHotwords();
        }
      }
    },
    async addWords() {
      let data = {
        Words: this.pname,
        hot: 1,
      };
      const { data: res } = await this.$http.post("addWords", data);
    },
    async addHotwords() {
      let data = {
        Words: this.pname,
      };
      const { data: res } = await this.$http.post("addHot", data);
    },
    async onkeyup() {
      if (this.pname === "") {
        this.PrepBoxShow = false;
      } else {
        this.PrepBoxShow = true;
        //防抖操作
        if (this.time !== null) {
          clearTimeout(this.time);
        }
        this.time = setTimeout(() => {
          this.searchWords();
        }, 200);
      }
    },
    async searchWords() {
      const { data: res } = await this.$http.get("searchWords", {
        params: { title: this.pname },
      });
      console.log(res);
      this.wordsList = res.data;
    },
  },
  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (to.params.pname != from.params.pname) {
        this.pname = to.params.pname;
        this.getQueryGoods(); //重新加载数据
      }
    },
  },
};
</script>
<style lang="less" scoped>
.headerbox {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  .header {
    padding: 0.5rem 0;
    height: 1.8rem;
    position: fixed;
    width: 100%;
    max-width: 640px;
    top: 0;
    background: #fff;
    z-index: 9999;
    border-bottom: 1px solid #eee;
    .headerL {
      position: absolute;
      left: 0;
      top: 0;
      height: 1.8rem;
      padding-left: 0.6rem;
      img {
        display: block;
        height: 1.1rem;
        padding-top: 0.9rem;
      }
    }
    .headerC0 {
      width: 75%;
      margin: 0 auto;
      height: 1.8rem;
      line-height: 1.8rem;
      text-align: center;
      background: #f7f7f7;
      border: 1px solid #f7f7f7;
      box-sizing: border-box;
      border-radius: 4px;
      .ssdiv {
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid #f47b5d;
        border-radius: 12px;
        input {
          float: left;
          width: 80%;
          border: 0;
          outline: none;
          height: 1.8rem;
          line-height: 1.8rem;
          color: #212121;
          font-size: 0.8rem;
          background: none;
          padding-left: 0.3rem;
          border-radius: 12px;
        }
        img {
          float: right;
          height: 1.8rem;
        }
      }
    }
    .headerR {
      position: absolute;
      right: 0;
      top: 0;
      height: 1.8rem;
      padding-right: 0.6rem;
      a {
        color: #333;
        font-size: 0.8rem;
        line-height: 2.8rem;
      }
    }
  }
}
.PrepBox {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #ffffff;
  top: 50px;
  left: 0;
  ul {
    overflow: hidden;
    li {
      padding: 8px;
      text-align: left;
      line-height: 24px;
    }
  }
}
.item_goodslist {
  .van-card__title {
    font-size: 0.9rem;
  }
  .van-card__thumb {
    width: 100px;
    height: 100px;
  }
  .van-card__price {
    display: inline-block;
    color: #ff4d40;
    font-weight: 600;
    font-size: 16px;
  }
  .van-card__price-integer {
    font-size: 18px;
    font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
  }
  .desc {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 5px;
    p {
      margin: 2px;
      font-size: 13px;
      text-align: center;
    }
    .color {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      width: 60px;
    }
    .color-title {
      color: #a0a0a0;
    }
  }
}
.ebli {
  text-align: left;
  margin-left: 107px;
  width: 150px;
  color: #9e9e9e;
}
</style>